<template>
	<div class="worktime-container">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="工作时间规则" name="worktime">
				<Search @searchData="searchData" />
				<div class="head">
					<el-button type="primary" @click="addWorkTime">新增</el-button>
				</div>
				<Table :tableData="tableData" :showIndex="true">
					<template v-slot:btn>
						<el-table-column width="310px" align="center" label="操作">
							<template slot-scope="scope">
								<el-button v-if="scope.row.workTimeName !== '全天'" size="mini" class="set-btn" @click="editWorkTime(scope.$index, scope.row)">编辑</el-button>
								<el-button size="mini" class="set-btn" @click="detailsWorkTime(scope.$index, scope.row)">详情</el-button>
							</template>
						</el-table-column>
					</template>
				</Table>
				<div class="page">
					<PageSize :pages="checkWorkingTimePages" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
				</div>
				<AddWorkTime :showAddWorkTime="showAddWorkTime" @closeAddWorkTime="closeAddWorkTime" @addWorkTimeData="addWorkTimeData" />
				<EditWorkingTime
					v-if="showEditWorkTime"
					:showEditWorkTime="showEditWorkTime"
					:editWrkingData="editWrkingData"
					@closeEditWorkTime="closeEditWorkTime"
					@editWorkimgTime="editWorkimgTime"
				/>
				<DetailsWorkingTime v-if="showDetailsWorkTime" :showDetailsWorkTime="showDetailsWorkTime" @closeDetailsWorkTime="closeDetailsWorkTime" />
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import Search from './components/Search.vue';
import Table from '@/views/components/Table.vue';
import PageSize from '@/views/components/PageSize.vue';
import AddWorkTime from './components/AddWorkTime.vue';
import EditWorkingTime from './components/EditWorkingTime.vue';
import DetailsWorkingTime from '@/views/components/DetailsWorkingTime.vue';
import { getWorkingTimeList, createWorkingTime, updateWorkingTime, selectWorkingTimeByList } from '@/api/api.js';
import { mapMutations } from 'vuex';
export default {
	components: {
		Search,
		Table,
		PageSize,
		AddWorkTime,
		EditWorkingTime,
		DetailsWorkingTime
	},
	props: {},
	data() {
		return {
			activeName: 'worktime',
			tableData: {
				sort: false,
				tableHead: [
					{
						label: '规则名称',
						prop: 'workTimeName'
					},
					{
						label: '创建时间',
						prop: 'createdAt'
					},
					{
						label: '创建人ID',
						prop: 'createdUserId'
					}
				],
				tableConent: [],
				showIndex: true,
				showCheck: false,
				checkData: {
					page: 1,
					pageSize: 10,
					total: 0
				}
			},
			checkWorkingTimePages: {
				page: 1,
				pageSize: 10,
				total: 0
			},
			showAddWorkTime: false,
			showEditWorkTime: false,
			showDetailsWorkTime: false,
			editWrkingData: {},
			workTimes: []
		};
	},
	mounted() {
		this.getWorkingTimeAllList();
	},
	methods: {
		...mapMutations('editWorkimgTime', ['SET_EDIT_WORK_TIMES']),
		// 新增
		addWorkTime() {
			this.showAddWorkTime = true;
		},
		// 关闭工作时间规则对话框
		closeAddWorkTime() {
			this.showAddWorkTime = false;
		},
		// 编辑按钮工作时间规则
		editWorkTime(index, row) {
			this.getDetailsInfo(row.workTimeId);
			const { workTimeId, workTimeName } = row;
			this.$store.commit('SET_EDIT_WORK_TIMES_ID', workTimeId);
			this.$store.commit('SET_EDIT_WORK_TIMES_NAME', workTimeName);
		},
		closeEditWorkTime() {
			this.showEditWorkTime = false;
		},
		// 详情工作时间规则
		detailsWorkTime(index, row) {
			const { workTimeId, workTimeName } = row;
			this.$store.commit('SET_EDIT_WORK_TIMES_ID', workTimeId);
			this.$store.commit('SET_EDIT_WORK_TIMES_NAME', workTimeName);
			selectWorkingTimeByList(row.workTimeId)
				.then(res => {
					this.workTimes = res.data.data.workTimePeriods;
					let workTimePeriods = [];
					this.workTimes.forEach(item => {
						let workTime = { startHour: '', startMinute: '', startSecond: '', endHour: '', endMinute: '', endSecond: '' };
						workTime.startHour = item.startTime.split(':')[0];
						workTime.startMinute = item.startTime.split(':')[1];
						workTime.startSecond = item.startTime.split(':')[2];
						workTime.endHour = item.endTime.split(':')[0];
						workTime.endMinute = item.endTime.split(':')[1];
						workTime.endSecond = item.endTime.split(':')[2];
						workTimePeriods.push(workTime);
						this.showDetailsWorkTime = true;
					});
					this.$store.commit('SET_EDIT_WORK_TIMES_TIMES', workTimePeriods);
				})
				.catch(err => {
					this.$message.error(`获取详情工作时间失败${err.message}`);
				});
		},
		closeDetailsWorkTime() {
			this.showDetailsWorkTime = false;
		},
		// 确定工作时间
		addWorkTimeData(data) {
			createWorkingTime(data)
				.then(() => {
					this.$message.success('新增成功');
					this.getWorkingTimeAllList();
					this.showAddWorkTime = false;
				})
				.catch(err => {
					this.$message.error(`新增失败${err.message}`);
					this.showAddWorkTime = false;
				});
		},
		// 工作时间列表
		getWorkingTimeAllList() {
			const data = {
				page: this.checkWorkingTimePages.page,
				pageSize: this.checkWorkingTimePages.pageSize,
				name: '',
				startTime: '',
				endTime: '',
				username: ''
			};
			getWorkingTimeList(data)
				.then(res => {
					if (res.status === 200) {
						console.log(res.data.result.rows, 'List数据');
						this.checkWorkingTimePages.total = res.data.result.count;
						this.tableData.tableConent = res.data.result.rows.map(item => {
							return {
								workTimeId: item.id,
								workTimeName: item.name,
								createdAt: this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss'),
								createdUserId: item.user && item.user.userName ? item.user.userName : '-'
							};
						});
					} else {
						this.$message.error('获取工作时间列表失败');
					}
				})
				.catch(err => {
					// this.$message.error(`获取失败${err.message}`);
					this.$requestApiError(err, () => {
						this.$router.push('/');
					});
				});
		},
		// 编辑工作时间
		editWorkimgTime(row) {
			updateWorkingTime(row)
				.then(() => {
					this.$message.success('修改成功');
					this.showEditWorkTime = false;
					this.getWorkingTimeAllList();
				})
				.catch(err => {
					this.$message.error(`修改失败${err.message}`);
					this.showEditWorkTime = false;
				});
		},
		// 检索按钮查看详情
		searchData(data) {
			console.log(data, '检索');
			this.checkWorkingTimePages.page = 1;
			this.checkWorkingTimePages.pageSize = 10;
			let workingTimeData = {
				page: this.checkWorkingTimePages.page,
				pageSize: this.checkWorkingTimePages.pageSize,
				name: data.name,
				startTime: data.startTime,
				endTime: data.endTime,
				username: data.createPersonId
			};
			getWorkingTimeList(workingTimeData)
				.then(res => {
					if (res.status === 200) {
						console.log(res, data);
						this.checkWorkingTimePages.total = res.data.result.count;
						this.tableData.tableConent = res.data.result.rows.map(item => {
							return {
								workTimeId: item.id,
								workTimeName: item.name,
								createdAt: this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss'),
								createdUserId: item.user && item.user.userName ? item.user.userName : '-'
							};
						});
					} else {
						this.$message.error('检索工作时间列表失败');
					}
				})
				.catch(err => {
					this.$message.error(`检索工作时间列表失败${err.message}`);
				});
		},
		changePageSize(val) {
			this.checkWorkingTimePages.pageSize = val;
			this.checkWorkingTimePages.page = 1;
			this.getWorkingTimeAllList();
		},
		changeCurrentPage(val) {
			this.checkWorkingTimePages.page = val;
			// this.checkWorkingTimePages.pageSize = 10;
			this.getWorkingTimeAllList();
		},
		getDetailsInfo(id) {
			selectWorkingTimeByList(id)
				.then(res => {
					this.workTimes = res.data.data.workTimePeriods;
					let workTimePeriods = [];

					this.workTimes.forEach(item => {
						let workTime = { startHour: '', startMinute: '', startSecond: '', endHour: '', endMinute: '', endSecond: '' };
						workTime.startHour = item.startTime.split(':')[0];
						workTime.startMinute = item.startTime.split(':')[1];
						workTime.startSecond = item.startTime.split(':')[2];

						workTime.endHour = item.endTime.split(':')[0];
						workTime.endMinute = item.endTime.split(':')[1];
						workTime.endSecond = item.endTime.split(':')[2];
						workTimePeriods.push(workTime);
					});
					this.$store.commit('SET_EDIT_WORK_TIMES_TIMES', workTimePeriods);
					this.showEditWorkTime = true;
				})
				.catch(err => {
					this.$message.error(`获取失败${err.message}`);
				});
		}
	}
};
</script>

<style lang="less" scoped>
.worktime-container {
	.head {
		padding-bottom: 20px;
		.el-button {
			width: 84px;
			height: 36px;
			background-color: #6384fe;
			padding: 0;
		}
	}
	.set-btn {
		color: #fff;
		background-color: #6384fe;
	}
	.page {
		margin-top: 15px;
	}
}
</style>
